import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from 'react-native';
import FontAwesome from "react-native-vector-icons/FontAwesome";
import GlobalStyles from "../styles/GlobalStyles";


export default class TextInputItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  

  render() {
    const {
      label,
      labelWidth,
      isMust,
      placeholder,
      maxLength,
      value,
      isBack,
      disable,
      onlyNum,
      autoComplete
    } = this.props;
   
    return (
      <View style={styles.item}>
        <View style={{alignItems:"center",justifyContent:"space-between",flexDirection:"row"}}>
            { 
              isMust?
              (<FontAwesome  name={'asterisk'} color={'red'} size={8} style={GlobalStyles.formRowRequire}/>)
              :null
            }
            <Text
               style={[
                styles.label,
                {justifyContent: 'flex-start'},
                labelWidth ? {width: labelWidth} : {width: 100},
              ]}
            >{label}</Text>
           
        </View>
        {/* 'numeric' */}
        <View style={{flex: 1}}>
            <TouchableOpacity>
              {disable?
                 <Text 
                    style={{paddingTop:10,paddingBottom:10}}
                 >{value}</Text>
              :
                  <TextInput 
                    maxLength={maxLength?maxLength:30}
                    style={{fontSize:14}}
                    value={value}
                    keyboardType={onlyNum?'numeric':'default'}
                    placeholder={placeholder}
                    onChangeText={text =>this.props.onChange(text)}
                  >
                  </TextInput>
              }
               
            </TouchableOpacity>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    marginLeft: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: '#e1e1e1',
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingRight: 14,
  },
  label: {
    fontSize: 14,
  },
  textCenter:{
    display:"flex",
    alignItems:"center",
    height:"100%"
  },
  inputStyle: {},
  value: {
    fontSize: 14,
    color: '#000',
    marginTop: 0,
  },
  placeholder: {
    fontSize: 14,
    color: '#a6a6a6',
  },
});
